<template>
  <table class="w-1/1 h-1/1 kvTable">
    <tbody>
      <tr>
        <td class="kvKey kvKeyValue" colspan="1">{{ componentProps.label || '标签' }}</td>
        <td class="kvValue kvKeyValue" colspan="1">{{ componentProps.value || '值' }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { useAutoDataBinding } from '@/composables/use-data-binding';
import type { IDataBindingConfig } from '@/components/mt-edit/store/types';
import type { PropType } from 'vue';

const props = defineProps({
  // 数据绑定配置
  dataBinding: {
    type: Object as () => IDataBindingConfig,
    default: () => ({
      enabled: false,
      sourceId: '',
      dataPointId: '',
      targetProperty: 'value',
      transform: 'string',
      defaultValue: '',
      updateInterval: 0
    })
  },
  fontFamily: {
    type: String,
    default: ''
  },
  fontSize: {
    type: Number,
    default: 15
  },
  label: {
    type: String,
    default: ''
  },
  labelWidth: {
    type: Number,
    default: 50
  },
  value: {
    type: String,
    default: ''
  },
  valueWidth: {
    type: Number,
    default: 50
  },
  color: {
    type: String,
    default: ''
  },
  border: {
    type: Boolean,
    default: true
  },
  borderColor: {
    type: String,
    default: ''
  }
});

// 响应式属性对象（用于数据绑定）
const componentProps = ref({
  fontFamily: props.fontFamily || '',
  fontSize: props.fontSize || 15,
  label: props.label || '标签',
  labelWidth: props.labelWidth || 50,
  value: props.value || '值',
  valueWidth: props.valueWidth || 50,
  color: props.color || '',
  border: props.border ?? true,
  borderColor: props.borderColor || ''
});

// 使用数据绑定
const shouldUseDataBinding =
  props.dataBinding && props.dataBinding.enabled && props.dataBinding.targetProperty !== 'hide';
const dataBinding = useAutoDataBinding(
  shouldUseDataBinding ? props.dataBinding : null,
  componentProps.value,
  (property: string, value: any) => {
    // 直接更新响应式对象的属性
    if (componentProps.value.hasOwnProperty(property)) {
      (componentProps.value as any)[property] = value;
    }
  }
);

// 监听 dataBinding 配置变化
watch(
  () => props.dataBinding,
  (newConfig, oldConfig) => {
    // dataBinding配置变化处理
  },
  { deep: true }
);

// 监听props变化，同步到响应式属性对象
watch(
  () => props.fontFamily,
  (newValue) => {
    componentProps.value.fontFamily = newValue;
  }
);
watch(
  () => props.fontSize,
  (newValue) => {
    componentProps.value.fontSize = newValue;
  }
);
watch(
  () => props.label,
  (newValue) => {
    componentProps.value.label = newValue;
  }
);
watch(
  () => props.labelWidth,
  (newValue) => {
    componentProps.value.labelWidth = newValue;
  }
);
watch(
  () => props.value,
  (newValue) => {
    if (!props.dataBinding?.enabled) {
      componentProps.value.value = newValue;
    }
  }
);
watch(
  () => props.valueWidth,
  (newValue) => {
    componentProps.value.valueWidth = newValue;
  }
);
watch(
  () => props.color,
  (newValue) => {
    componentProps.value.color = newValue;
  }
);
watch(
  () => props.border,
  (newValue) => {
    componentProps.value.border = newValue;
  }
);
watch(
  () => props.borderColor,
  (newValue) => {
    componentProps.value.borderColor = newValue;
  }
);
</script>
<style scroped>
.kvTable {
  border: v-bind('`${componentProps.border?1:0}px solid ${componentProps.borderColor}`');
}
.kvKeyValue {
  font-size: v-bind('`${componentProps.fontSize}px`');
  font-family: v-bind('`${componentProps.fontFamily}`');
  color: v-bind('`${componentProps.color}`');
}
.kvKey {
  width: v-bind('`${componentProps.labelWidth}px`');
  border-right-width: v-bind('`${componentProps.border?1:0}px`');
  border-right-style: solid;
  border-right-color: v-bind('`${componentProps.borderColor}`') !important;
}
.kvValue {
  width: v-bind('`${componentProps.valueWidth}px`');
}
</style>
